<template>
    <div>
        <el-card class="box-card" style="text-align: center">
            <div slot="header" class="clearfix">
                <el-steps :active="active" finish-status="success">
                    <el-step title="选择图片所属类型"></el-step>
                    <el-step title="输入图片所属成员id"></el-step>
                    <el-step title="上传图片"></el-step>
                </el-steps>
            </div>
            <el-radio-group type="type" v-model="type" v-show="visible[0]">
                <el-radio label="product">商品展示图</el-radio>
                <el-radio label="brand">品牌LOGO图</el-radio>
                <el-radio label="carousel">首页轮播图</el-radio>
            </el-radio-group>
            <div style="margin-top: 20px" v-show="visible[1]">
                <el-input v-model="typeId"
                          oninput="value=value.replace(/[^\d]/g,'')"
                          size="mini"
                          style="width: 180px" placeholder="请输入图片所属成员ID"></el-input>
            </div>
            <div style="text-align: center" v-show="visible[2]">
                <el-upload
                        class="upload-demo"
                        action="/"
                        :on-change="handlerChange"
                        :file-list="fileList"
                        :auto-upload="false"
                        list-type="picture"
                        multiple="multiple">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </div>
            <el-button style="float: right" @click="next">下一步</el-button>
        </el-card>
    </div>

</template>
<script>
    export default {
        inject:["reload"],
        data() {
            return {
                active: 0,
                type: null,
                typeId: null,
                files: [],
                visible: [true, false, false],
                fileList: [],
                upLoadDto: null,


            };
        },

        methods: {
            next() {
                switch (this.active) {
                    case 0:
                        if (this.type != null) {
                            this.visible[this.active] = false
                            this.active++
                            this.visible[this.active] = true
                        } else {
                            this.$message.error("请选择类型")
                        }
                        break;
                    case 1:
                        if (this.typeId != null) {
                            this.visible[this.active] = false
                            this.active++
                            this.visible[this.active] = true
                        } else {
                            this.$message.error("类型ID不能为空")
                        }
                        break;
                    case 2:
                        if (this.fileList.length >0) {
                            this.upLoadDto = new FormData();
                            this.upLoadDto.append('type', this.type)
                            this.upLoadDto.append('typeId', this.typeId)
                            this.fileList.forEach(val => {
                                this.upLoadDto.append('files', val.raw)
                            })
                            this.$http.post("/pictrue/upload", this.upLoadDto).then(res => {
                                if(res.data.code ===200){
                                    this.$message.success(res.data.msg)
                                    this.reload()
                                }else {
                                    const _this = this;
                                    this.$notify.error({
                                        message: "上传失败，"+res.data.msg+"，关闭消息重试",
                                        duration:1500,
                                        offset: 300,
                                        onClose: function () {
                                            _this.reload()
                                        }
                                    },)
                                }

                            })
                        } else {
                            this.$message.error("图片不能为空")
                        }
                        break;
                    default:this.$message.info("请正确填写信息")
                }
            },
            handlerChange(file, fileList) {
                this.fileList = fileList
            }
        }
    }
</script>
